<template>
  <div class="wrapper">
    <img src="../assets/user.png" alt="">
    <div><input class="input" type="text" data-test="username" placeholder="用户名" v-model="data.username" /></div>
    <div><input class="input" type="text" data-test="password" placeholder="密码" v-model="data.password" /></div>
    <div>
      <button class="button" data-test="login" @click="login">登录</button>
    </div>
    <!--    <div>-->
    <!--      <a class="link" href="javascript:;" data-test="register">已有账号去登录</a>-->
    <!--    </div>-->
    <!--    <Toast :toast="toast" />-->
  </div>
</template>

<script>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import userService from '@/api/service/userService'

export default {
  name: 'Login',
  setup () {
    const data = reactive({
      username: '',
      password: ''
    })
    const router = useRouter()
    const login = async () => {
      const result = await userService.login({
        username: data.username,
        password: data.password
      })
      console.log('登录结果：', result)
      const expectedToken = result.token
      localStorage.setItem('userIdentity', `Bearer ${expectedToken}`)
      router.push({ path: '/' })
    }
    return {
      data,
      login
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    width: .66rem;
    height: .66rem;
    margin-top: 1.4rem;
    margin-bottom: .4rem;
  }

  .input {
    background: #F9F9F9;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: .06rem;
    width: 2.95rem;
    height: .48rem;
    margin-bottom: .16rem;
    font-size: .16rem;
    color: rgba(0, 0, 0, 0.50);
    line-height: .24rem;
    padding: 0 .16rem;
    box-sizing: border-box;
  }

  .button {
    width: 2.95rem;
    height: .48rem;
    background: #0091FF;
    box-shadow: 0 .04rem .08rem 0 rgba(0, 145, 255, 0.32);
    border-radius: .04rem;
    font-size: .16rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    line-height: .24rem;
    outline: none;
    border: none;
    margin-bottom: .16rem;
  }

  .link {
    font-size: .14rem;
    color: rgba(0, 0, 0, 0.50);
    letter-spacing: 0;
  }
}

</style>
